import { useState, useEffect, memo, FC } from 'react';
import { Menu } from 'antd';
import { Link } from 'umi';
import { IRouteComponentProps } from 'umi';
import { PieChartOutlined } from '@ant-design/icons'
import type { MenuProps } from 'antd';

type MenuItem = Required<MenuProps>['items'][number];


function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}


import styles from './index.less';
import Logo from '@/assets/images/logo.png';




interface MenuleftProps {
  collapsed: boolean
}

const MeunLeft: FC<MenuleftProps> = (props) => {
  const [key, setKey] = useState<string>('');

  const { collapsed} = props;


  const items: MenuProps['items'] = [
    getItem('测试页面', '/home', <PieChartOutlined />, )
  ];

  useEffect(() => {
    const key = sessionStorage.getItem('key') || '/home';
    setKey(key);
  }, []);

  const onClick: MenuProps['onClick'] = e => {
    sessionStorage.setItem('key', e.key);
    setKey(e.key);
  };

  return (
    <div>
      <div
        className={[
          styles.title,
          collapsed ? styles.LogoClose : styles.LogoOpen,
        ].join(' ')}
      >
        <img src={Logo} alt="" />
        {collapsed ? '' : <span>赣鹰低代码平台</span>}
      </div>
      <Menu
        defaultSelectedKeys={['/home']}
        selectedKeys={[key]}
        onClick={onClick}
        mode="inline"
        theme="light"
        items={items}
      >
      </Menu>
    </div>
  );
};

export default memo(MeunLeft);
